<template>
	<view>
		<uni-popup ref="popup" :safe-area="false">
			<view class="bottom-popup">
				<view class="popup-title d-flex psr a-center j-center">
					<view class="text-title">热量差</view>
					<image @tap="closePopup" class="title-icon" src="@/static/image/close.png"></image>
				</view>
				<view class="popup-row">
					<picker-view indicator-style="height: 70rpx;background: #F5F5F5;z-index: 0;" :value="value" @change="bindChange" class="picker-view">
						<picker-view-column>
							<view class="item" :style="`${value[0]==index?select:noSelect}`" v-for="(item,index) in calories" :key="index">{{item}}千卡</view>
						</picker-view-column>
						
					</picker-view>
				</view>
				<view class="popup-button d-flex j-center">
					<tm-button _style="margin:0 auto 0 auto;font-weight: 600;" round="5" :width="650" :shadow="-1"
					    :linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#FFFFFF" @tap="determine"
					    label="确定"></tm-button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup lang="ts">
import { ref, defineEmits } from "vue";

const select ="font-size: 40rpx;color:#1DC691"
const noSelect ="font-size: 30rpx;color:#333333"
const calories:any = ref([])
//初始化选择组件
for (let i = 0; i <= 140; i++) {
	calories.value.push(100 + (i*10))
}
const value = ref()
const popup = ref()
const showPopup = (initialCalorie:number) => {
	
	popup.value.open("bottom")
	if(initialCalorie==null)initialCalorie = 350;//初始值
	//初始默认值
	let calorieIndex = calories.value.indexOf(initialCalorie);
	value.value = [calorieIndex]
	
}
const closePopup = () => {
	popup.value.close()
}

const bindChange = (e:any) => {
	const val = e.detail.value;
	value.value = val
}
//确定选择并给父页面传值
const emit = defineEmits(["onGetCalorie"])
const determine = () => {
	emit("onGetCalorie", calories.value[value.value[0]]);
	closePopup();//关闭
}
defineExpose({
  showPopup,
  closePopup
});
</script>
<style lang="scss" scoped>

.bottom-popup{
	padding-bottom: 60rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	.popup-title{
		height: 100rpx;
		border-bottom: 1rpx solid #E4E4E4;
		.title-text{
			position:absolute;
			top:34rpx;
			left:50rpx;
			height: 32rpx;
			width: 234rpx;
		}
		.title-icon{
			position:absolute;
			top:32rpx;
			right: 30rpx;
			
			width: 36rpx;
			height: 36rpx;
		}
	}
	.popup-show{
		justify-content: space-between;
		height: 80rpx;
		padding: 0 30rpx 0 30rpx;
		.show-text{
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}
	.popup-row{
		padding-bottom: 16rpx;
		.picker-view {
			height: 400rpx;
			margin-top: 20rpx;
		}
		
		.item {
			line-height: 70rpx;
			text-align: center;
			
			font-size: 34rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			
		}
		
	}
}
</style>